<template>
    <!-- 轮播图开始 -->
    <div class="swiper" @mouseenter="on_top_enter" @mouseleave="on_top_leave">
        <swiper class="swiper-box" :options="swiperOption" ref="mySwiper">
            <!-- 轮播的图片 -->
            <swiper-slide class="swiper-ietm"  :id="item.blindBoxId" v-for="(item,index) in list" :key="index">
              <div class="item" >
                 <img :src="item.skinImage"/>
                 <span>{{item.skinName}}</span>
              </div>
            </swiper-slide>

            <!-- <div class="swiper-button-prev"
             slot="button-prev"></div>
            <div class="swiper-button-next"
             slot="button-next"></div> -->
            <!-- 小圆点分页器 -->
            <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
        </swiper>
    </div>
    <!-- 轮播图结束 -->
</template>

<script>
    export default {
        name:'swiperlist',
        props: ['swiperlistData'],
        data() {
            return {
                swiperOption:{
                    loop: true, // 设置图片循环
                    autoplay: true, //设置可自动播放
                    speed: 2000, //自动播放的速度，每隔1秒滑动一次
                    slidesPerView :6,
                    allowTouchMove: false,

                    // freeMode: true,
                    // pagination: {
                    //    el: ".swiper-pagination",//分页器的类名
                    //    clickable: true //设置分页小圆点可手动点击
                    // },
                    //  navigation: {
                    //           nextEl: '.swiper-button-next',
                    //           prevEl: '.swiper-button-prev',
                    // }

                },
                list:[]
            }
        },
        methods:{
          get_list(){
            this.$api.get('/api/home/newGetSkin',
            null, r => {
                    this.list = r.data
                    console.log(r)
               })
          },
          goto_openbind(id){
            this.$router.push({
                      path: `/openblind/${id}`,
                })
          },
           on_top_enter() {
              this.mySwiper.autoplay.stop()
          },
          on_top_leave() {
              this.mySwiper.autoplay.start()
          },

      },
       mounted() {
         let that = this
          this.mySwiper.on('click',function(e){
           that.goto_openbind(e.path[2].id);
        })
       },
      computed: {
          mySwiper() {
            // mySwiper 是要绑定到标签中的ref属性
              return this.$refs.mySwiper.$swiper
          },

      },

        created() {
          this.get_list()
          // console.log(this.swiperlistData)
        }
    }
</script>

<style scoped>
/* swiper轮播图样式设置开始 */
/* 修改分页小圆点的默认样式 */
.item img{
  position: absolute;
  top: 50%;
  right: 50%;
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 180px;
  transform: translate(50%,-60%);
}
.item span{
  font-size: 16px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  bottom: 24px;
  width: 300px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-align: center;
}
.item{
  background-image: url(../assets/swiper-list-bg.jpg);
  height: 240px;
  color: #939CAB;
  position: relative;
  background-size: 100% 100%;
  cursor: pointer;
}
.item:hover{
  background-image: url(../assets/swiper-list-bg-ac.jpg);
  color: #fff;
  background-size: 100% 100%;
}
.swiper >>> .swiper-pagination-bullet-active {
    background-color: #fff;
}
.swiper {
    width: 1920px;
    margin:  0 auto;
}
.swiper-box{
  /* width: 1920px; */
}
/* swiper轮播图样式设置结束 */
</style>
